<template>
	<div>
		<el-dialog
			v-if="dialogVisible"
			v-el-draggable-dialog
			:visible.sync="dialogVisible"
			:title="title"
			top="5vh"
			destroy-on-close
			append-to-body
			v-bind="$attrs"
			:before-close="closed"
		>
			<div class="contentClass"><slot name="content" /></div>
			<div slot="footer" class="dialog-footer"><slot name="footer" /></div>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { defineComponent,onBeforeUnmount } from 'vue'
	
export default defineComponent({
	name: 'DialogClustom',
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		},
		title: {
			type: string,
			default: 'mqy'
		}
	},
	setup(props, context) {
		const closed = () => {
			context.$emit('IClose', false)
		}
		
		onBeforeUnmount(()=>{
			context.$emit('IClose', false)
		})
		
		return {
			closed
		}
	}
})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
	border-radius: 4px;
}

::v-deep .el-dialog__header {
	padding: 15px 20px;
	border-bottom: 1px solid #e8e8e8;
}

::v-deep .el-dialog__body {
	padding: 0px;
}

::v-deep .el-dialog__footer {
	padding: 15px 20px;
}

.contentClass {
	height: auto;
	max-height: 75vh;
	padding: 15px 20px;
	overflow: hidden auto;
}
</style>
